<template>
    <div>
        <el-row style="display: flex;align-items: center;padding: 10px">
            <el-col :span="ui.spanLabel" class="label">
                <label :title="properties.description">{{keys}}:</label>
            </el-col>
            <el-col :span="ui.spanControl">
                <el-select :disabled="properties.disabled" v-model="eValue" filterable placeholder="请选择" @change="changeVal">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "e-select",
        props:{
            properties:{
                type:Object
            },
            ui:{
                type:Object
            },
            keys:{
                type:String
            }
        },
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                eValue: ''
            }
        },
        mounted(){
            let that = this;
            this.$bus.$on('activeNode',function (e) {   //监听选中节点改变时当前表单初始值改变
                that.eValue = typeof(e[that.keys])!="undefined"?e[that.keys]:'';
            })
        },
        methods:{
            changeVal(val){  //当前表单输入值改变通知父组件更新画布节点数据
                this.$emit('changeAttr',{[this.keys]:val});
            }
        }
    }
</script>

<style scoped>
    .label{
        text-align: right;
        padding-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>